<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main.tpl.homePage"><i class="fa fa-home"></i> 首页</a></li>
        <li><a ui-sref="main.hui.menu.list">菜单管理</a></li>
        <li class="active" ng-bind="title"></li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="wrapper-md content">
    <div class="panel panel-default">
        <!-- 头部 -->
        <div class="panel-heading font-bold">{{title}}
            <a class="btn btn-sm btn-icon btn-rounded btn-default pull-right m-t-n-xs" ui-sref="main.messageSets.menu.list"><i class="text-md fa fa-times text-muted"></i></a>
        </div>
        <!--表单-->
        <div class="panel-body">
            <form class="form-horizontal"  name="user_form">

                <!--菜单名称-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="menuName">
                        <span class="text-danger wrapper-sm">*</span>菜单名称</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="menuName" id="menuName" placeholder="请输入菜单名称" ng-model="record.menuName" >
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <!--菜单类型-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="menuType">
                        <span class="text-danger wrapper-sm">*</span>菜单类型</label>
                    <div class="col-sm-6">
                        <select class="form-control" ng-model="record.menuType" id="menuType" >
                            <option value ="">--请选择--</option>
                            <option value ="A01">个人消息(金融)</option>
                            <option value ="A02">平台公告(金融)</option>
                            <option value ="A03">最新活动(金融)</option>
                            <option value ="A04">媒体报道(金融)</option>
                            <option value ="A05">客服(金融)</option>
                            <option value ="B01">个人消息(智仟汇)</option>
                            <option value ="B02">活动消息(智仟汇)</option>
                            <option value ="B03">客服消息(智仟汇)</option>
                            <option value ="C01">订单消息(习之铃铛)</option>
                            <option value ="C02">优惠推荐(习之铃铛)</option>
                            <option value ="C03">系统消息(习之铃铛)</option>
                            <option value ="D01">新闻(习之老板娘)</option>
                            <option value ="D02">优惠(习之老板娘)</option>
                            <option value ="D03">通知(习之老板娘)</option>
                            <option value ="E01">驿站精选</option>
                            <option value ="E02">联璧金融</option>
                            <option value ="E03">智仟汇</option>
                            <option value ="E04">习之铃铛</option>
                            <option value ="E05">习之老板娘</option>
                        </select>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>

                <!--菜单小图标（带红点的）-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label"><span class="text-danger wrapper-sm">*</span>菜单小图标（带红点的）:</label>

                    <div class="col-sm-6">
                        <div class="previewWrap fl">
                            <up-load multi="1" draggable="true" data='imgData' size="310" ratio='' class="previewMain">
                                <div class="upLoadImgWrap">
                                    <div class="preViewImgWrap fl" ng-repeat="preImg in imgData">
                                        <div class="preViewImg">
                                            <div class="picItem">
                                                <div class="mask"><span class="reUpLoad" index="{{$index}}">重新上传</span></div>
                                                <div><img ng-src="{{preImg.src[0]}}" onload="if(this.width>=this.height){this.style.width='100%'}else{this.style.height='100%'}"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div ng-show="imgData.length<1" class="clear">
                                        <div class="text fl" ng-show="imgData.length<1">
                                            点击上传图片<br>(请上传300KB以内图片)<br>(限jpg/png/jpeg)
                                        </div>
                                        <label class="upLoadImg fl" for="uploadFile">
                                            <img src="res/img/addPic.png" alt="">
                                            <input type="file" accept="image/png,image/gif,image/jpeg" id="uploadFile" autocomplete="off">
                                        </label>
                                    </div>
                                </div>
                            </up-load>
                        </div>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>

                <!--菜单小图标（不带红点的）-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label"><span class="text-danger wrapper-sm">*</span>菜单小图标（不带红点的）:</label>

                    <div class="col-sm-6">
                        <div class="previewWrap fl">
                            <up-load multi="1" draggable="true" data='imgDatas' size="310" ratio='' class="previewMain">
                                <div class="upLoadImgWrap">
                                    <div class="preViewImgWrap fl" ng-repeat="preImg in imgDatas">
                                        <div class="preViewImg">
                                            <div class="picItem">
                                                <div class="mask"><span class="reUpLoad" index="{{$index}}">重新上传</span></div>
                                                <div><img ng-src="{{preImg.src[0]}}" onload="if(this.width>=this.height){this.style.width='100%'}else{this.style.height='100%'}"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div ng-show="imgDatas.length<1" class="clear">
                                        <div class="text fl" ng-show="imgDatas.length<1">
                                            点击上传图片<br>(请上传300KB以内图片)<br>(限jpg/png/jpeg)
                                        </div>
                                        <label class="upLoadImg fl" for="uploadFiles">
                                            <img src="res/img/addPic.png" alt="">
                                            <input type="file" accept="image/png,image/gif,image/jpeg" id="uploadFiles" autocomplete="off">
                                        </label>
                                    </div>
                                </div>
                            </up-load>
                        </div>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>

                <!--排序号-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="sortNum">
                        <span class="text-danger wrapper-sm">*</span>排序号</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="sortNum" id="sortNum" placeholder="请输入排序号" ng-model="record.sortNum" >
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <!--跳转标识-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="requestFlag">
                        <span class="text-danger wrapper-sm">*</span>跳转标识</label>
                    <div class="col-sm-6">
                        <select class="form-control" ng-model="record.requestFlag" id="requestFlag" >
                            <option value ="">--请选择--</option>
                            <option value ="0">不跳转</option>
                            <option value ="1">原生页</option>
                            <option value ="2">H5</option>
                        </select>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <!--跳转页URL-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="requestUrl">
                        <span class="text-danger wrapper-sm">*</span>跳转页URL</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="requestUrl" id="requestUrl" placeholder="请输入跳转页URL" ng-model="record.requestUrl" >
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <!--模块编号-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="moduleNo">
                        <span class="text-danger wrapper-sm">*</span>模块编号</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="moduleNo" id="moduleNo" placeholder="请输入模块编号" ng-model="record.moduleNo" >
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <!--渠道编号-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="channelNo">
                        <span class="text-danger wrapper-sm">*</span>渠道编号</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="channelNo" id="channelNo" placeholder="请输入渠道编号" ng-model="record.channelNo" >
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <!--是否可用-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="enable">
                        <span class="text-danger wrapper-sm">*</span>是否可用</label>
                    <div class="col-sm-6">
                        <select class="form-control" ng-model="record.enable" id="enable" >
                            <option value ="">--请选择--</option>
                            <option value ="Y">可用</option>
                            <option value ="N">不可用</option>
                        </select>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <!--btn-->
                <div class="form-group">
                    <div class="col-sm-6 col-sm-offset-2">
                        <button type="reset" class="btn ifc-btn btn-dark">重置</button>
                        <button type="submit" class="btn btn-info w-xs m-l-xl" ng-click="submit()" ng-disabled="isDisabled">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<style>
    #activity .record{
        width: 70%;
    }
    #activity .radio{
        min-width: 120px;
    }
    #activity .previewWrap{
        width:500px;
        padding-bottom: 10px;
        border:1px solid #d3d3d3;
    }
    #activity .previewWrap .text{
        margin-top:50px;
    }
    .MR10{
        margin-right: 10px;
    }
    .previewWrap{
        text-align: center;
        margin-right: 10px;
        margin-bottom: 20px;
    }
    .previewWrap .preview{
        width: 330px;
        height: 270px;
        border: 1px solid #d6d5d5;
        margin-top: 10px;
    }
    .previewWrap .preview .title{
        padding:10px;
        font-size: 12px;
        text-align: left;
    }
    .previewWrap .upLoadImg{
        width: 140px;
        height: 140px;
        border:1px dashed #d6d5d5;
        padding-top: 38px;
        margin:15px 0 0 30px;
        display:inline-block;
        background: url('res/img/addPic.png') no-repeat center;
        cursor: pointer;
    }
    .previewWrap .preview .text{
        color:#d6d5d5;
        padding-top: 20px;
    }

    .previewWrap .text{
        padding:13px 50px;
        /*margin-top: 50px;*/
    }
    .previewWrap .preViewImgWrap{
        margin: 15px;
    }
    .previewWrap .preViewImg{
        width:150px;
        height:150px;
        overflow: hidden;
    }
    .fl{
        float:left;
    }
    input[type="file"]{
        display: none;
    }
    .previewMain{
        /*height:86%;*/
    }

    .preViewImg{
        width:300px;
        height:190px;
        overflow: hidden;
    }
    .preViewImg img{
        /*width: 100%;*/

    }
    .preViewImg .picItem{
        height: 100%;
        position: relative;
    }
    .preViewImg .mask + div{
        height: 100%;
        width: 100%;
    }
    .picItem:hover .mask{
        height:100%;
    }
    .preViewImg .mask{
        position: absolute;
        overflow: hidden;
        height:0;
        width: 100%;
        background:rgba(0,0,0,0.5);
        transition: all 0.3s;
    }
    .preViewImg span{
        position:absolute;
        width: 80px;
        height:34px;
        border-radius: 17px;
        line-height: 34px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        background:deepskyblue;
        left:50%;
        top:50%;
        font-size: 12px;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
    }
</style>